<template>
    <!-- 主内容区域 -->
    <div class="main-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h2 class="page-title">系管理</h2>
        </div>

        <!-- 操作栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                <el-button type="primary" @click="openadd">
                    <i class="el-icon-plus"></i>创建
                </el-button>
            </div>

            <div class="toolbar-right">
                <el-input v-model="name" placeholder="系名" class="search-input" clearable>
                </el-input>
                <el-button type="primary" @click="search">搜索</el-button>
            </div>
        </div>
        <!-- 分页 -->
        <el-pagination :current-page="page" @current-change="handlechange" background layout="prev, pager, next" :total="total" style="text-align: center;">
        </el-pagination>
        <!-- 数据表格 -->

        <template>
            <el-table :data="tableData" style="width: 100%" max-height="500" v-loading="loading">
                <el-table-column prop="id" label="系ID" width="250" align="center">
                </el-table-column>
                <el-table-column prop="name" label="系名称" width="250" align="center">
                </el-table-column>
                <el-table-column prop="majorCount" label="专业数" width="250" align="center">
                </el-table-column>
                <el-table-column prop="teacherCount" label="教师数" width="250"  align="center">
                </el-table-column>
                <el-table-column label="操作" align="center"> 
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="openupdata(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>



        <!-- 添加/编辑对话框 -->
        <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="500px">
            <el-form label-width="80px">
                <el-form-item label="系名">
                    <el-input v-model="form.name" placeholder="请输入系名" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handlesubmit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { departmentpagecount, departmentpage, department, departmentdel, admindepartment } from '@/api/department';
export default {
    data() {
        return {
            tableData: [],
            name: '',
            total: 0,
            page:1,
            dialogVisible: false,
            dialogTitle: '',
            loading: false,
            form: {
                name: "",
            }
        }
    },
    methods: {
        async getList() {
            const params = {
                name: this.name,
            };
            this.loading = true;
            let ret1 = await departmentpagecount(params);
            console.log(ret1);
            this.total = ret1.data * 10;
            if (ret1.code == 0) {
                let ret2 = await departmentpage(params, this.page);
                console.log(ret2);
                this.tableData = ret2.data;
            }
            this.loading = false;
        },
        search(){
            this.page = 1;
            this.getList()
        },
        handlechange(val){
            console.log(val);
            this.page = val;
            this.getList()
        },
        openadd() {
            this.dialogVisible = true;
            this.dialogTitle = '添加';
            this.form = { id: -1, name: ''};
        },
        openupdata(row) {
            this.dialogVisible = true;
            this.dialogTitle = '编辑';
            this.form = { ...row };
        },
        async handlesubmit() {
            // 修改
            if (this.form.id != -1) {
                const res = await admindepartment(this.form);
                if (res.code == 0) {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                    });
                    this.dialogVisible = false;
                    this.getList();
                } else {
                    console.log(res);

                    this.$message({
                        message: '操作失败',
                        type: 'error',
                    });
                }
            } else {
                // 添加
                const res = await department(this.form);
                if (res.code == 0) {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                    });
                    this.dialogVisible = false;
                    this.getList();
                } else {
                    console.log(res);

                    this.$message({
                        message: '操作失败',
                        type: 'error',
                    });
                }
            }

        },
        // 删除
        async del(id) {
            console.log(id);
            this.$confirm('确定要删除该系吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 调用删除接口
                const res = await departmentdel({ id });
                if (res.code === 0) {
                    this.$message.success('删除成功');
                    this.getList(); // 刷新列表
                } else {
                    this.$message.error(res.msg || '删除失败');
                }
            }).catch(() => {
                
            })
        },
    },
    mounted() {
        this.getList();
    }
}
</script>

<style scoped>
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
}

.page-header {
    padding: 20px 24px 0;
    background: white;
}

.page-title {
    font-size: 20px;
    color: #303133;
    margin: 0;
    font-weight: 500;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: white;
    border-bottom: 1px solid #ebeef5;
}

.toolbar-left {
    display: flex;
    gap: 10px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-input {
    width: 200px;
}

.table-container {
    flex: 1;
    padding: 0 24px;
    overflow-y: auto;
}

.data-table {
    margin-top: 20px;
}

:deep(.data-table .el-table__header-wrapper) {
    background: #fafafa;
}

:deep(.data-table .el-table__header th) {
    background: #fafafa;
    color: #606266;
    font-weight: 500;
}

.pagination-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: white;
    border-top: 1px solid #ebeef5;
}

:deep(.el-pagination) {
    justify-content: center;
}
</style>